<template>
    <div class="person">
        <h2>姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
    export default {
        name:'Person',
        setup(){//setup 函数中的this是undefined,vue3中已经弱化this

            //数据:原来是写在data中的,现在的数据都不是响应式的
            let name = '张三'//注意:此时的数据不是响应式的
            let age = 18//注意:此时的数据不是响应式的
            let tel = '13888888888'//注意:此时的数据不是响应式的

            //方法
            function changeName(){
                name = 'zhang-san'
            }
            function changeAge(){
                age += 1
            }
            function showTel(){
                alert(tel)
            }

            //将数据交出去,模版中才可以使用
            return {name,age,changeName,changeAge,showTel}

            //setup的返回值可以是一个渲染函数
            // return()=>'haha'
        }
    }
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 10px;
    }
</style>